import {LoginOrSetting} from "@/components/LoginOrSetting/LoginOrSetting.tsx";
import style from "@/styles/select.module.scss"
import setting1 from "@/assets/images/selectSystem/setting1.png"
import setting2 from "@/assets/images/selectSystem/setting2.png"
import setting3 from "@/assets/images/selectSystem/setting3.png"
import setting4 from "@/assets/images/selectSystem/setting4.png"
import {type ReactNode, useCallback} from "react";
import {useNavigate} from "react-router";
import {notification} from "antd";

type SelectBorderType = {
    children: ReactNode
    onClick: () => void
}

type SettingItem = {
    src: string
    name: string
    url: string
}

const settingList: SettingItem[] = [
    {
        src: setting2,
        name: '项目管理',
        url: '/home'
    },
    {
        src: setting1,
        name: 'AI大模型',
        url: ''
    },
    {
        src: setting3,
        name: '3D管理',
        url: ''
    },
    {
        src: setting4,
        name: '可视化管理',
        url: ''
    },
]



const SelectBorder = (props: SelectBorderType) => {

    const onClick = useCallback(() => {
        props.onClick()
    }, [props])

    return (
        <div className={style.select_border} onClick={onClick}>
            {props.children}
        </div>
    )
}


const Select = () => {
    const navigate = useNavigate()

    const settingClick = useCallback((row: SettingItem) => {
        if (row.url) {
            navigate(row.url, {
                replace: true
            })
        } else {
            notification.warning({
                message: row.name + '项目还未完善请选择其他项目',
                duration: 2
            })
        }
    }, [navigate])

    return (
        <LoginOrSetting title={'选择项目'}>
            <div className={style.select}>
                {
                    settingList.map((item, index) => (
                        <SelectBorder key={index} onClick={() => settingClick(item)}>
                            <img src={item.src}  width={150} height={150} alt={item.name}/>
                            <span>{item.name}</span>
                        </SelectBorder>
                    ))
                }
            </div>
        </LoginOrSetting>
    )
}

export default Select